<template>
    <div class="bg-white goods_create" style="margin: -20px; margin-top:-1rem; margin-bottom: 0!important;">
        <router-link :to="{ path: './list' }" style="position: absolute;top: 12px;left: 200px;">
            <el-button size="mini">回到商品列表</el-button>
        </router-link>
        <el-tabs v-model="tabIndex" @tab-click="handleClick" class="px-3">
            <el-tab-pane label="基础设置">
                <base-create></base-create>
                <!-- <el-form label-width="80px" class="text-align-left">
                    <el-form-item label="商品名称">
                        <el-input :value="title"  
                        @input="vModel('title',$event)" 
                        placeholder="请输入不超过11个字符" 
                        class="w-50"></el-input>
                    </el-form-item>
                    <el-form-item label="商品分类">
                        <el-cascader :value="categorg"  
                        @input="vModel('categorg',$event)" 
                        :options="options">

                        </el-cascader>
                    </el-form-item>
                    <el-form-item label="商品描述" >
                        <el-input type="textarea" :value="desc"  
                        @input="vModel('desc',$event)"
                        placeholder="商品描述">
                    </el-input>
                    </el-form-item>
                    <el-form-item label="商品单位">
                        <el-input :value="unit"  
                        @input="vModel('unit',$event)" 
                        placeholder="请输入不超过11个字符" 
                        class="w-50"></el-input>
                    </el-form-item>
                    <el-form-item label="总库存">
                        <el-input placeholder="请输入内容" type="number"
                        :value="stock"  
                        @input="vModel('stock',$event)" 
                        class="w-25">
                            <template slot="append">件</template>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="库存预警">
    <el-input placeholder="请输入内容" type="number" :value="min_stock" @input="vModel('min_stock',$event)" class="w-25">
                            <template slot="append">件</template>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="库存显示">
                        <div>
        <el-radio-group :value="display_stock" @input="vModel('display_stock',$event)" role="radiogroup">
                                <el-radio :label="1" border>是</el-radio>
                                <el-radio :label="0" border>否</el-radio>
                            </el-radio-group>
                        </div>
                    </el-form-item>
                    <el-form-item label="是否上架">
                        <div>
        <el-radio-group :value="status" @input="vModel('status',$event)" role="radiogroup">
                                <el-radio :label="1" border>放入仓库</el-radio>
                                <el-radio :label="0" border>立即上架</el-radio>
                            </el-radio-group>
                        </div>
                    </el-form-item>
                    <el-form-item label="运费模板">
                        <el-form-item label="">
        <el-select :value="express" @input="vModel('express',$event)" placeholder="请选择运费模板">
                                <el-option label="区域一" value="shanghai"></el-option>
                                <el-option label="区域二" value="beijing"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">立即创建</el-button>
                        <el-button>取消</el-button>
                    </el-form-item>
</el-form> -->
            </el-tab-pane>
            <!-- 商品规格tab页 -->
            <el-tab-pane label="商品规格">
                <!-- 单规格和多规格的切换 -->
                <el-form label-width="80px" class="text-align-left">
                    <el-form-item label="商品规格">
                        <!-- 监听skus_type的改变 -->
                        <!-- <el-radio-group :value="skus_type" size="mini" 
                        @input="vModel({
                            key: 'skus_type',
                            value: $event
                        })"> -->
                        <el-radio-group size="mini" :value="skus_type" @input="vModel('skus_type', $event)">
                            <el-radio-button :label="0">单一规格</el-radio-button>
                            <el-radio-button :label="1">多规格</el-radio-button>
                        </el-radio-group>
                    </el-form-item>
                </el-form>
                <!-- 单规格 封装在single-attrs中-->
                <template v-if="skus_type === 0">
                    <single-attrs></single-attrs>
                </template>
                <!-- <template v-if="skus_type === 0">
                    <el-form label-width="80px" class="text-align-left">
                        <el-form-item label="市场价格">
                            <el-input type="number" 
                            placeholder="请输入内容" 
                            :value="oprice"  
                            @input="vModel('oprice',$event)" 
                            class="w-25">
                                <template slot="append">元</template>
                            </el-input>
                        </el-form-item>
                        <el-form-item label="销售价格">
                            <el-input type="number" 
                            placeholder="请输入内容" 
                            :value="pprice"  
                            @input="vModel('oprice',$event)"  
                            class="w-25">
                                <template slot="append">元</template>
                            </el-input>
                        </el-form-item> 
                        <el-form-item label="成本价格">
                            <el-input type="number" 
                            placeholder="请输入内容" 
                            :value="cprice"  
                            @input="vModel('cprice',$event)"  
                            class="w-25">
                                <template slot="append">元</template>
                            </el-input>
                        </el-form-item> 
                        <el-form-item label="商品重量">
                            <el-input type="number" 
                            placeholder="请输入内容" 
                            :value="weight"  
                            @input="vModel('weight',$event)" 
                             class="w-25">
                                <template slot="append">公斤</template>
                            </el-input>
                        </el-form-item>
                        <el-form-item label="商品体积">
                            <el-input type="number" placeholder="请输入内容" 
                            :value="volume"  
                            @input="vModel('volume',$event)"  
                            class="w-25">
                                <template slot="append">立方米</template>
                            </el-input>
                        </el-form-item>
                    </el-form>
                </template> -->
                <!-- 多规格 -->
                <template v-else>
                    <!-- 规格卡片 -->
                    <el-form label-width="80px" class="text-align-left">
                        <el-form-item label="添加规格">
                            <sku-card v-for="(item, index) in sku_card" :key="index" :item="item" :index="index"
                                :total="skuCardTotal"></sku-card>

                            <el-button type="success" class="mt-3" size="mini" @click="addSkuCard">添加规格</el-button>
                        </el-form-item>
                    </el-form>


                    <el-form>
                        <el-form-item label="批量设置">
                            <template v-if="!updateAllStatus">
                                <el-button type="text" v-for="(btn, btnIndex) in updateList" :key="btnIndex"
                                    @click="openUpdateAllStatus(btn)">{{ btn.name }}</el-button>
                            </template>

                            <div v-else class="d-flex alin-items-center">
                                <el-input size="small" style="width:150px;margin-right:20px" type="number"
                                    :placeholder="UpdateAllPlaceholder" v-model="updateAllValue"></el-input>
                                <el-button type="primary" size="mini" @click="UpdateAllSubmit">设置</el-button>
                                <el-button size="mini" @click="closeUpdateAllStatus">取消</el-button>
                            </div>
                        </el-form-item>
                    </el-form>

                    <el-form>
                        <el-form-item label="规格设置">
                            <!-- 从sku-table中拿到list数据 -->
                            <sku-table ref="table"></sku-table>
                        </el-form-item>
                    </el-form>
                </template>
            </el-tab-pane>
            <el-tab-pane label="商品属性">
                <el-form ref="form" label-width="80px">
                    <el-form-item label="商品类型">
                        <el-select :value="goods_type_id" placeholder="请选择商品类型"
                            @change="vModel('goods_type_id', $event)">
                            <el-option label="区域一" value="a"></el-option>
                            <el-option label="区域二" value="b"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
                <el-card class="box-card" style="width: 700px;">
                    <div slot="header" class="clearfix">
                        <span>商品属性</span>
                    </div>
                    <el-form label-width="80px">
                        <el-form-item label="手机型号" inline>
                            <el-input placeholder="请输入手机型号" :value="goods_attrs.phone_model"
                                @input="vModelGoodsAttrs({ key: 'phone_model', value: $event })"></el-input>
                        </el-form-item>
                    </el-form>
                </el-card>

            </el-tab-pane>
            <el-tab-pane label="媒体设置">
                <el-form>
                    <el-form-item label-width="80px" label="商品大图">
                        <div class="d-flex flex-wrap">
                            <!-- 替换的话，传递索引过去chooseImage(index) -->
                            <div style="width: 150px; height:150px;cursor:pointer;position:relative"
                                class="border rounded d-flex align-items-center justify-content-center mr-3 mb-3"
                                v-for="(item, index) in banners" :key="index" @click="chooseImage(index)">
                                <img v-if="item.url" :src="item.url" alt="" style="width: 100%;height: 100%;">

                                <i v-else class="el-icon-plus text-muted" style="font-size: 30px;"></i>

                                <i class="el-icon-delete p-2 text-white"
                                    style="position: absolute; top:0;right: 0; background-color: rgba(0,0,0,0.4);"
                                    @click.stop="deleteImage(index)"></i>
                            </div>

                            <!-- chooseImage(-1) -->
                            <div v-if="banners.length < 9" style="width: 150px; height:150px;cursor:pointer"
                                class="border rounded d-flex align-items-center justify-content-center mr-3 mb-3"
                                @click="chooseImage(-1)">
                                <i class="el-icon-plus text-muted" style="font-size: 30px;"></i>
                            </div>
                        </div>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
            <el-tab-pane label="商品详情">
                <div class="p-3">
                    <tinymce-editor v-model="content" @input="updateContent"></tinymce-editor>
                </div>
            </el-tab-pane>
            <el-tab-pane label="折扣设置">
                <el-form label-width="80px">
                    <el-form-item label="折扣价">
                        <el-input :value="discount" @input="vModel('discount', $event)" style="width: 500px;">
                            <template slot="append">%</template>
                        </el-input>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script>
// 解构vuex
import { mapState, mapMutations } from 'vuex';

import baseCreate from '@/components/shop/create/base-create.vue';
import singleAttrs from '@/components/shop/create/single-attrs.vue';
import skuCard from '@/components/shop/create/sku/sku-card.vue';
import skuTable from '@/components/shop/create/sku-table.vue';
import TinymceEditor from '@/components/common/tinymce-editor.vue'

export default {
    name: "createGoods",
    inject: ['app'],
    components: { baseCreate, singleAttrs, skuCard, skuTable, TinymceEditor },
    data() {
        return {
            msg: 'Welcom to use Tinmce Editor',
            tabIndex: 0,
            // 批量修改状态
            updateAllStatus: false,
            UpdateAllPlaceholder: '',
            updateAllValue: '',
            updateList: [{
                name: '销售价',
                key: 'pprice'
            }, {
                name: '市场价',
                key: 'oprice'
            }, {
                name: '成本价',
                key: 'cprice'
            }, {
                name: '库存',
                key: 'stock'
            }, {
                name: '体积',
                key: 'volumne'
            }, {
                name: '重量',
                key: 'weight'
            },]
            // 被剪切放入store/moudle/goods_create.js中
            // skus_type: 0,//商品规格
            // form: {
            //     name: '',
            //     categorg: [],
            //     desc: '',
            //     unit: '',
            //     stock: 0,
            //     min_stock: 0,
            //     display_stock: '',
            //     status: '',
            //     express: '',
            // },

            // options: [{
            //     value: 'zhinan',
            //    

            //         }]
            //     }]
            // }, {
            //     value: 'ziyuan',
            //     label: '资源',
            //     children: [{
            //   
            //     }]
            // }],
        }
    },
    computed: {
        ...mapState('goods_create', {
            // ceshi: state => state.goods_create.ceshi,
            skus_type: state => state.skus_type,

            sku_card: state => state.sku_card,

            // title: state => state.title,
            // categorg: state => state.categorg,
            // desc: state => state.desc,
            // unit: state => state.unit,
            // stock: state => state.stock,
            // min_stock: state => state.min_stock,
            // display_stock: state => state.display_stock,
            // status: state => state.status,
            // express: state => state.express,

            // pprice: state => state.pprice,
            // oprice: state => state.oprice,
            // cprice: state => state.cprice,
            // weight: state => state.weight,
            // volume: state => state.volume,
            content: state => state.content,
            banners: state => state.banners,
            goods_type_id: state => state.goods_type_id,
            goods_attrs: state => state.goods_attrs,
            discount: state => state.discount,
        }),
        //    其他计算属性
        skuCardTotal() {
            return this.sku_card.length;
        }
    },
    // 测试是否vuex能够访问skus_type
    mounted() {

    },
    methods: {
        // 用来加载数据，监听点的是哪一个tab
        handleClick(tab) {
            console.log(tab.label+'页');
        },
        // 注释到create组件中了
        // onSubmit() {
        //     console.log('submit!');
        // },
        // // 添加处理 skus_type 改变的方法
        // handleSkusTypeChange(val) {
        //     // console.log('changing skus_type to:', val);
        //     this.$store.commit('goods_create/updateSkusType', val);
        // },

        // 修改state方法一
        // ...mapMutations('goods_create',['vModel']),

        // 修改state方法二
        ...mapMutations('goods_create', [
            'addSkuCard',
            'vModelState',
            'delSkuCard',
            'vModelSkuCard',
            'sortSkuCard',
            'updateContent',
            'vModelGoodsAttrs'
        ]),
        // 修改表单的值
        vModel(key, value) {
            this.vModelState({
                key,
                value
            })
        },
        // 修改批量设置的状态
        openUpdateAllStatus(item) {
            this.UpdateAllPlaceholder = item.name
            this.updateAllStatus = item.key
        },
        // 取消批量设置状态
        closeUpdateAllStatus() {
            this.updateAllStatus = false
            this.updateAllValue = ''
        },
        // 提交批量设置
        UpdateAllSubmit() {
            this.$refs.table.list.forEach(item => {
                item[this.updateAllStatus] = this.updateAllValue
            })
            this.closeUpdateAllStatus()
        },
        // 选择图片
        chooseImage(index) {
            const Max = 9;
            let count = Max - this.banners.length;
            // 下面的chooseImage是来自于app.vue中的函数
            // 传递max参数为3，即最大选中chooseImage=3
            this.app.chooseImage((res) => {
                let list = [];
                // 选择走的流程
                if (index === -1) {
                    // 让原有的banners数组中的元素就等于当前的展示的内容
                    list = [...this.banners, ...res];
                }
                // 替换操作走的流程
                else {
                    list = [...this.banners]
                    list[index] = res[0]
                }

                // 不能用这个，因为res为一个数组
                // list.push(res);
                this.vModel('banners', list)
            }, index === -1 ? count : 1);
            // index为-1代表选择，选择的话选择9-n的剩余张数，替换的话只能为一张
        },
        // 删除大图的方法
        deleteImage(index) {
            this.$confirm('是否要删除该图片, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                let list = [...this.banners];
                list.splice(index, 1);
                this.vModel('banners', list)
            })
        },
        // 改变下拉框
        ceshi(e) {
            console.log(e);

        }
    }
}

</script>
<style>
.goods_create .el-form-item {
    margin-bottom: 10px;
}
</style>